<template>
	<view class="padding-bottom-xl min-h-100" :class="dataList.length > 0 ? 'bg-gray':''">
		<view class="head">
			<u-navbar title="历史充值" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" />
		</view>
		<view class="p-t-10 p-l-10 p-r-10">
			<view class="p-20 border-box bg-white m-b-10 b-r-10" v-for="(item,index) in dataList" :key="index">
				<view class="p-10 flex justify-between">
					<view class="font-28 color-gray">{{ item.createTime }}</view>
					<view class="font-26 color-yellow box1">{{ item.state | getStatusValue(statusList)}}</view>
				</view>
				<view class="p-10 flex justify-between">
					<view class="font-28 color-gray">充值金额</view>
					<view class="font-26">{{ item.money }}</view>
				</view>
				<view class="p-10 flex justify-between">
					<view class="font-28 color-gray">备注</view>
					<view class="font-26">{{ item.remark }}</view>
				</view>
				<view class="p-10 flex justify-between">
					<view class="font-28 color-gray">充值凭证</view>
					<view class="flex-1 flex justify-end">
						<image class="imgBox" v-for="(img,indexxx) in item.certificateUrls" :key="indexxx" :src="img" @click="lookImg(img)"></image>
					</view>
				</view>
				<view class="p-10 flex justify-between" v-if="item.state == 1 || item.state == 2">
					<view class="font-28 color-gray">审核时间</view>
					<view class="font-26">{{ item.updateTime }}</view>
				</view>
				<view class="p-10 flex justify-between" v-if="item.state == 2">
					<view class="font-28 color-gray">审核备注</view>
					<view class="font-26">{{ item.auditRemarks }}</view>
				</view>
				<view class="flex flex-end m-t-10" v-if="item.state == 2" @click="clickData(item)">
					<view class="btn line-h-60 b-r-10 color-w text-center">重新提交</view>
				</view>
			</view>
			<view class="flex flex-col flex-row-center flex-col-center m-b-20" v-if="dataList.length == 0">
				<u-empty class="p-t-100" text="暂无数据..."></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import { voucherRecondInfo } from '@/common/api/voucher.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				statusList: [
					{label: 0,value: '申请中'},
					{label: 1,value: '审核通过'},
					{label: 2,value: '审核驳回'},
				],
				queryPamas: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				dataList:[],  //列表数据
			};
		},
		filters: {
			getStatusValue(val,list) {
				let obj = list.find(item => item.label == val);
				return JSON.stringify(obj) !== "{}" ? obj.value : '';
			}
		},
		onShow() {
			this.loadVoucherRecondInfo()
		},
		onReachBottom() {
			if(this.dataList.length >= this.total){
				return
			}else{
				this.queryPamas.pageNum++
				this.loadVoucherRecondInfo()
			}
		},
		methods: {
			// 预览图片 
			lookImg(url){
				uni.previewImage({
					urls: [url]
				});
			},
			// 获取历史提交
			loadVoucherRecondInfo() {
				voucherRecondInfo(this.queryPamas).then(res => {
					if(res.code == 200){
						if(this.queryPamas.pageNum == 1){
							this.dataList = res.data
						}else{
							this.dataList.concat(res.data)
						}
						this.total = res.extend.total
						console.log(this.dataList,'this.dataList')
					}
				})
			},
			// 点击跳转详情
			clickData(data){
				uni.setStorageSync('newVoucherData',data)
				uni.navigateTo({
					url: '/pages/newVoucher/addVoucher?data=1'
				})
			},
			resetData() {
				uni.showLoading({
					title: '加载中',
				})
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss" scoped>
.imgBg{
	width: 100%;
	height: 190rpx;
}
.min-h-100{
	min-height: 100vh;
}
.imgBox{
	width: 100rpx;
	height: 100rpx;
}
.box1{
	border: 1rpx solid #ECA52B;
	padding: 2rpx 10rpx;
	border-radius: 10rpx;
}
.btn{
	width: 240rpx;
	background: #ECA52B;
}
</style>